<template>
    <div class="colContainer" v-if="ifShow">
        <el-checkbox-group v-model="mycheckedCities" :min="1" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="(city, index) in cities" :label="index"  :key="city.prop">{{city.label}}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script>
  import Vue from 'vue'
  import { CheckboxGroup,Checkbox} from 'element-ui' 
  Vue.use(CheckboxGroup)
  Vue.use(Checkbox)
  

  export default {
    data() {
      return {
        // checkAll: true,
        computedCities: [],
        // cities: [
        //       {label:'序号',prop:"-1",isShow:true,width:''},
        //       {label:'单位',prop:"0",isShow:true,width:''},
        //       {label:'姓名',prop:"1",isShow:true,},
        //       {label:'性别',prop:"2",isShow:true,class:'width40'},
        //       {label:'职务',prop:"3",isShow:true},
        //       {label:'任现职时间',prop:"4",isShow:true},
        //       {label:'出生年月',prop:"5",isShow:true},
        //       {label:'籍贯',prop:"6",isShow:true},
        //       {label:'民族',prop:"7",isShow:true},
        //       {label:'政治面貌',prop:"8",isShow:true},
        //       {label:'参加工作时间',prop:"9",isShow:true,class:'width90'},
        //       {label:'学历学位',prop:"10",isShow:true},
        //       {label:'毕业院校',prop:"11",isShow:true},
        //       {label:'所学专业',prop:"12",isShow:true}
        //     ],
        isIndeterminate: true,
        mycheckedCities:[]
      };
    },
    methods: {
      handleCheckedCitiesChange(value) {
        // this.$emit('update:');
        this.$emit('changeCol',value);
        this.$emit("update:checkedCities",value);
      }
    },
    computed:{
        // checkedCities: function(){
        //     var arr=[];
        //     for (var i=0,len=this.cities.length;i<len;i++) {
        //         if (!this.cities[i].notChecked) {
        //             arr.push(i)
        //         }        
        //     }
        //     this.computedCities = arr;
        //     // this.$emit("update:checkedCities",arr);
        //     console.log(this.computedCities,"computedCites");
        //     return arr;

        // }
    },
    mounted:function(){
    	this.mycheckedCities = JSON.parse(JSON.stringify(this.checkedCities));
        this.$emit('changeCol',this.mycheckedCities);
    },
    props:{
        ifShow:{
            type:Boolean,
            default:true
        },
        colData:{
            type:Array,
            default:function(){
                return ['性别', '职务', '入职时间', '出生日期','出生地']
            }
        },
        cities:{
            type:Array,
            default:function(){
                return [];
            }
        },
        checkedCities:{
            type:Array,
            default:function(){
                return [];
            }            
        }
    }
  };
</script>
<style scoped>
    .colContainer{
        position: absolute;
        z-index: 200;
        top: 35px;
        left: -99px;
        width: 150px;
        padding: 10px 20px;
        max-height: 260px;
        overflow-y: auto;
        background-color: #ecf0f5;
    }
</style>
<style>
    .colContainer .el-checkbox, .colContainer .el-checkbox__input {
        float: left;
        margin-left:0px;
        margin-bottom:10px;
    }
    .colContainer .el-checkbox+.el-checkbox {
        margin-left: 0px;
        margin-bottom:10px;
    } 
    .colContainer .el-checkbox-group label.el-checkbox{
        width: 100%;
        display: inline-block;
        text-align: left;  
    } 

</style>

